| 使用 JavaScript 将 HTML 内容附加到现有的 HTML 元素 | 您所在的位置：网站首页 › HTML <svg> 标签 › 使用 JavaScript 将 HTML 内容附加到现有的 HTML 元素 |
|
使用 InnerHTML 添加新 HTML 节点的缺点
添加 HTML 内容而不替换 DOM 元素
在 JavaScript 中使用 appendChild() 附加 HTML 内容
使用 insertAdjacentHTML() 添加 HTML 节点
使用 javascript 将 HTML 内容添加到 div 或其他 HTML 元素很容易。我们可以使用新的 HTML 内容设置元素的 HTMLElement.innerHTML 属性。但在此过程中，它会清除添加到其中的所有动态属性。 使用 InnerHTML 添加新 HTML 节点的缺点 HTMLElement.innerHTML 的工作原理是删除元素内的 HTML 内容，然后使用包含在其中的新 HTML 片段重新添加它们。本质上，它替换了 HTML 内容，而不仅仅是添加一个新内容。 当我们使用 innerHTML 属性将新的 HTML 元素添加到 DOM 时，它也会删除所有后代节点，然后将它们替换为通过解析新 HTML 内容（分配给 的 HTML 字符串）构建的新节点 innerHTML 属性）并重新呈现整个 HTML。 鲜为人知的是，在经过网络安全审查的项目中使用 innerHTML 时，代码可能会被拒绝。建议不要直接使用 innerHTMl，因为它可能有潜在的安全风险（更多详细信息，请参阅 MDN 链接）。 添加 HTML 内容而不替换 DOM 元素要将一段 HTML 代码添加到我们现有的 DOM，我们可以使用以下 javascript 内置函数，而不必担心丢失任何已经附加的动态内容。 appendChild() insertAdjacentHTML() 在 JavaScript 中使用 appendChild() 附加 HTML 内容appendChild() 的作用与 innerHTML 的作用相同。我们可以使用这两种方法将 HTML 内容添加到节点。两种方法之间的区别在于 appendChild() 是一个函数，而 innerHTML 是一个属性。appendChild() 将向现有 DOM 元素添加一个节点，而不是像 innerHTML 属性那样替换 DOM 的内容。 User Details Name: Address: Add Address Line var lineCount = 0; addAddressLine = function() { var i = document.createElement('input'); i.setAttribute('type', 'text'); i.setAttribute('placeholder', 'Address Line ' + ++lineCount); var addressContainer = document.getElementById('adress'); addressContainer.appendChild(i); }我们使用上述代码创建了一个表单来捕获用户的姓名和地址。地址通常有多于一行。因此，我们创建了一个按钮，在单击以捕获这些额外的地址行时添加新的输入字段。以下是创建新输入字段的过程。 我们在 Add Address Line 按钮的点击事件上调用 addAddressLine 函数。 在函数中，我们使用 document.createElement('input') 函数动态创建 HTML input。它返回存储在 i 变量中的创建的 input 元素。 接下来，我们使用 setAttribute() 方法将 type 和 placeholder 属性设置为创建的 input 变量。 我们已经准备好将 input 元素添加到现有的 div 结构中。因此，我们使用 docuemnt.getElementById() 查询 address div，它返回整个 div 结构，然后我们使用 JavaScript 的 appendChild(i) 函数。 appendChild(i) 函数添加由变量 i 保存的动态创建的 input 元素，并将其放在 address``div 的末尾。每次添加新输入字段时，我们都使用 lineCount 来增加占位符值。 注意 我们还可以使用较新的方法 append() 将创建的元素附加到 DOM。javascript 方法 append 允许我们使用 DOMString（简单字符串文本）作为参数并且不返回任何值。请注意 Internet Explorer 浏览器不支持较新的 append() 方法。 所有现代网络浏览器，包括 Internet Explorer，都支持旧的 appendChild() 函数。 使用 insertAdjacentHTML() 添加 HTML 节点appendChild() 甚至 append() 函数都能够向给定的 HTML 节点添加新元素。这两种方法都在最后一个子元素之后插入元素。它可能不适用于所有场景。特别是如果我们希望在 HTML 结构中的指定位置添加 HTML 节点。对于这种情况，可以使用 insertAdjacentHTML() 函数。它需要几个参数，位置和该位置的文本。 Position：insertAdjacentHTML 支持位置参数中的四个值。 beforebegin：在元素开始之前插入 HTML 节点。 afterbegin：顾名思义，此选项将元素插入到所选节点的开始标记之后，并将其放置在第一个子节点之前。 beforeend：这个类似于 appendChild()。顾名思义，beforeend 位置将元素放置在最后一个子元素之后。 afterend：指的是目标 HTML 节点标签关闭后的位置。String：我们可以插入字符串格式的 HTML 作为第二个参数。例如： Hello World!。 一目了然，表示如下。 让我们看一下与我们讨论的 appendChild() 和 JavaScript 的 insertAdjacentHTML() 函数相同的例子。 User Details Name: Address: Add Address Line var lineCount = 0; addAddressLine = function() { var i = document.createElement('input'); i.setAttribute('type', 'text'); i.setAttribute('placeholder', 'Address Line ' + ++lineCount); var addressContainer = document.getElementById('adress'); addressContainer.insertAdjacentElement('beforeend', i); }在此代码中，我们在参数中使用了 beforeend 选项将动态创建的输入元素附加到 address div 的末尾。你可以尝试使用其他属性，如 afterend、beforebegin 和 afterbegin 参数。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |